<template>
  <div class="userRankIndex">
    <div class="newsCenter" >
      <Header @modify="modify" @naviBack="naviBack" :title="title" :flag="flag" :flag2="flag2"></Header>
      <div class="newsContent">
        <div class="rankTop">
          <div class="rankLeft">
            <p class="p1">{{personInfo.total_score||personInfo.avg_score}}</p>
            <p class="p2">{{person1}}积分</p>
          </div>
          <div class="userAvater">
            <img :src=personInfo.face alt="" onerror="this.onerror=null;this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
            <p class="userName">{{personInfo.username}}</p>
            <p class="userTitle">{{personInfo.company_name}}</p>
          </div>
          <div class="rankRight">
            <p class="p1">第{{personInfo.rank}}名</p>
            <p class="p2">{{person2}}排名</p>
          </div>
        </div>
        <div class="rankBottom">
          <span
            @click.stop="choiseRank(index)"
            v-for="(item,index) in rankBottom" :class="{'active':defaultIndex1==index}"> {{item}}</span>
        </div>
      </div>
    </div>
      <!---->
      <div class="rankDetail">
        <p class="rankCategory">
          <span    @click.stop="choiseCategory(index)"
            v-for="(item,index) in rankCategory" class="sp1" :class="{'active':defaultIndex2==index}">{{item}}</span>
        </p>
        <!--<rankAll :id="defaultId" ></rankAll>-->
        <div class="rankAll">
            <div class="rankMonth  rankSitutation" :class="{'active':defaultIndex1==0}" v-if="rankList.length>0">
              <div class="rankListItem flexs " v-for="(item,index) in rankList" :class="{'rankTop1':index==0,'rankTop2':index==1,'rankTop3':index==2}">
                    <span class="rankHoner">
                        <span v-if="index>=3">{{index+1}}</span>
                    </span>
                <p class="rankDepartemnt flex1">
                  <img :src=item.face alt="" onerror="this.onerror=null;this.src='https://api.cloudcpc.com/static/index/images/codeCover2.jpg'">
                  <span>{{item.username}}</span>
                </p>
                <span class="totalScore"> {{item.total_score}}</span>
              </div>
          </div>
          <div class="rankMonth  rankSitutation" :class="{'active':defaultIndex1==1}" v-if="rankList2.length>0">
            <div class="rankListItem flexs " v-for="(item,index) in rankList2" :class="{'rankTop1':index==0,'rankTop2':index==1,'rankTop3':index==2}">
                  <span class="rankHoner">
                      <span v-if="index>=3">{{index+1}}</span>
                  </span>
              <p class="rankDepartemnt flex1">
                <span>{{item.company_name}}</span>
              </p>
              <span class="totalScore"> {{item.total_score}}</span>
            </div>
          </div>
            <div class="noData" v-if="noData">
              <img src="https://api.cloudcpc.com/static/index/images/noData.png" alt="">
            </div>
        </div>
        <loading v-if="showLoading"></loading>
    </div>
  </div>
</template>
<script>
  import Header from '../../components/userheader.vue'
//  import rankAll from '../../components/userRank.vue'
  import weui from '../../../static/js/weui.js'
  import loading from '../../components/loading.vue'
  import {mapState} from 'vuex'
  export default({
    data (){
      return {
        showLoading: true,
        title:'我的排名',
        flag:false,
        flag2:true,
        rankBottom:['个人排行','公司排行'],
        rankCategory:['月榜','年榜'],
        defaultIndex1:0,
        defaultIndex2:0,
        defaultId:8,
        type:1,
        rankList:[],
        rankList2:[],
        noData:false,
        str:'',
        person1:'个人',
        person2:'个人',
        personInfo:{

        }
      }
    },
    computed:{
      ...mapState({
        uid:state =>state.app.loginState.uid ||localStorage.getItem('uid')
      })
    },
    methods: {
      choiseRank(index){
        this.defaultIndex1 =index
        this.showLoading =true
        if(index==0){
          this.person1 ='个人'
          this.person2 ='个人'
          this.rankList=[]
          this.initData(this.str,this.type)
        }else {
          this.rankList2=[]
          this.initCompanyData(this.str,this.type)
          this.person1 ='公司'
          this.person2 ='公司'

        }
      },
      choiseCategory (index){
//          console.log(index)
        this.defaultIndex2 =index
        this.type= this.defaultIndex2+1
        if(this.defaultIndex1==0){
          this.rankList =[]
          this.initData(this.str,this.type)
        }else{
          this.rankList2 =[]
          this.initCompanyData(this.str,this.type)
        }
//        this.showLoading =true
      },
      initCompanyData(str,type){
        this.rankList2=[]
        this.noData =false
        this.axios.get('/home/User/getCompanyRank?'+`${this.baseUrl}`,{
            params:{
                uid:this.uid,
                time:str,
                type:type
            }
        })
          .then((res)=>{
//            console.log(res.data.data.data.length)
            if(res.data.code==1){
              this.showLoading =false
//              console.log(res.data)
              if(res.data.data.length==0){
                  this.noData =true
              }else{
                this.personInfo =res.data.data.user
                this.rankList2.push(...res.data.data.data)
              }
            }
          })
      },
      initData(str,type){
          this.rankList=[]
        this.noData =false
        this.axios.get('/home/User/getPersonRank?'+`${this.baseUrl}`,{
            params:{
                uid:this.uid,
                time:str,
                type:type
            }
        })
          .then((res)=>{
//            console.log(res.data.data.data.length)
            if(res.data.code==1){
              this.showLoading =false
                if(res.data.data.data.length==0){
                  this.noData =true
                }else{
                  this.personInfo =res.data.data.user
                  this.rankList.push(...res.data.data.data)
                }
            }
          })
      },
      naviBack(){
        this.$router.go(-1)
      },
      modify (){
          let that =this
        weui.datePicker({
          start: 1989,
          end: new Date().getFullYear(),
          defaultValue: [new Date().getFullYear(), new Date().getMonth() * 1 + 1],
          endMonth: new Date().getMonth() * 1,
          onChange: function (result) {
//              console.log(result)
          },
          onConfirm: function (result) {
            var year = result[0];
            var month = result[1];
            var time = year + '-' + month;
            if(that.defaultIndex1==0){
              that.initData(time,this.type)
            }else{
              that.initCompanyData(time,this.type)
            }

          }
        })
      }
    },
    components:{
      Header,
//      rankAll,
      loading
    },
    mounted(){
        this.str =new Date().getUTCFullYear()+'-'+(new Date().getMonth()*1+1)
        this.initData(this.str,this.type)
    }
  })
</script>

<style scoped="">
  .noData{
    text-align: center;
    width: 100%;
    height: 100%;
  }
  .noData img{
    position: absolute;
    left: 0;
    top:0;
    bottom: 0;
    right: 0;
    margin: auto;
    width: 200px;
    height: 200px;
  }
  .newsContent{
    height: 3.52rem;
    padding:  0 0.32rem;
    overflow: hidden;
    background-color: #e83329;
    position: relative;
  }
  .rankTop{
    font-size: 0;
    height: 2.6rem;
  }
  .rankTop>div{
    display: inline-block;
    height:2.6rem;
  }
  .rankTop .rankLeft{
    width: 1.6rem;
    padding-top: 0.85rem;
    vertical-align: top;

  }
  .rankTop .userAvater{
    width: 3.62rem;
    padding-top: 0.1rem;
    text-align: center;
  }
  .rankTop .userAvater img{
    display: inline-block;
    width: 1.27rem;
    height: 1.27rem;
    border-radius: 50%;

  }
  .rankTop .rankRight{
    width: 1.6rem;
    vertical-align: top;
    padding-top: 0.85rem;
  }
  .rankTop .p1{
    font-size: 0.28rem;
    color: #f6f3f3;
    text-align: center;
    margin-bottom: 0.2rem;
  }
  .rankTop .p2{
    font-size: 0.24rem;
    color: #f6f3f3;
    text-align: center;
  }
  .userName{
    font-size: 0.32rem;
    color: white;
    margin-top: 0.2rem;
  }
  .userTitle{
    font-size: 0.24rem;
    color: rgba(255,255,255,0.7);
  }
  .rankBottom{
    position: absolute;
    font-size: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0.92rem;
    background: rgba(0,0,0,0.3) url("../../../static/images/rankIng.png") no-repeat ;
    background-size: 7.5rem 0.92rem;
    background-position: center;
  }
  .rankBottom span{
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    line-height: 0.92rem;
    color: rgba(255,255,255,0.4);
    font-size: 0.3rem;
    letter-spacing: 1px;
  }
  .rankBottom span.active{
    color: white;
    position: relative;
  }
  .rankBottom span.active::after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: 0px;
    height: 0px;
    width: 0px;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #fff;
    border-left:5px solid transparent ;
  }
  .rankDetail{
    text-align: center;
    height: calc( 100% - 3.52rem);
    overflow-y: scroll;
  }
  .rankDetail .rankCategory{
    display: inline-block;
    width: 4.86rem;
    height: 0.56rem;
    font-size: 0;
    line-height: 0.56rem;
    border-radius: 0.27rem;
    -webkit-border-radius: 0.27rem;
    margin-top: 0.2rem;
    overflow: hidden;

  }
  .rankCategory span{
    font-size: 0.26rem;
    display: inline-block;
    width: 50%;
    height: 100%;
    text-align: center;
    color: white;
    letter-spacing: 3px;

  }
  .rankCategory span{
    background: #f6aba7;
  }
  .rankCategory span.active{

    background: #ed5b53;
  }
  .flexs{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .flex1{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-width: 0;
  }
  .rankAll{
    position: relative;
    padding: 0 0.32rem;
    height: calc( 100% - 0.76rem);

  }
  .rankAll .rankWeek,.rankAll .rankMonth{
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    display: none;
  }
  .rankAll>div.active{
    display: block;
  }
  .rankListItem{
    height: 0.75rem;
    padding: 0.25rem 0;
    margin: 0 0.32rem;
    border-bottom: 0.03rem solid #f6f5f5;
  }
  .rankListItem .rankHoner{
    width: 0.75rem;
    height: 0.65rem;


  }
  .rankListItem .rankHoner {
    position: relative;
  }
  .rankTop1 .rankHoner:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 0.49rem;
    height: 0.59rem;
    background-image: url("../../../static/images/1st.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.49rem 0.59rem;
  }
  .rankTop2 .rankHoner:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 0.49rem;
    height: 0.59rem;
    background-image: url("../../../static/images/2st.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.49rem 0.59rem;
  }
  .rankTop3 .rankHoner:before{
    position: absolute;
    content: '';
    left: 0;
    top:0;
    width: 0.49rem;
    height: 0.59rem;
    background-image: url("../../../static/images/3st.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 0.49rem 0.59rem;
  }
  /*.rankListItem .rankHoner img{*/
    /*vertical-align: middle;*/
    /*width: 0.49rem;*/
    /*height: 0.59rem;*/
  /*}*/

  .rankListItem .rankHoner {
    font-size: 0.3rem;
    color: #474646;
    width: 0.9rem;
    text-align: left;
  }
  .rankListItem .rankHoner cite{
    margin-left: 8px;
    font-style: normal;
  }
  .rankListItem  .rankDepartemnt{
    text-align: left;
    font-size: 0.3rem;
    vertical-align: top;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-align: justify;
    line-height: 2.2;
  }
  .rankListItem  .rankDepartemnt img{
    display: inline-block;
    vertical-align: middle;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    -webkit-border-radius: 50%;
  }
  .rankListItem  .rankDepartemnt span{

  }
  .rankListItem  .totalScore{
    width: 0.75rem;
    text-align: right;
    font-size: 0.28rem;
    color: #ed5b53;
  }
  .userRankIndex{
    width: 100%;
    height: 100%;
  }
</style>
